<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    .con{
        width: 1024px;
        margin: 0 auto;
        height: 400px;
        background: lightblue;
      overflow: hidden;
    }
    .p1{
        width: 200px;
        height: 380px;
        background: yellowgreen;
        transform: translateX(117px) translateY(110px) rotate(-30deg);
        overflow: hidden;
    }

    .p2{
        width: 200px;
        height: 380px;
        background: red;
        transform: translateX(-96px) translateY(-131px) rotate(-29deg);
        overflow: hidden;
    }
    .p3{
        width: 200px;
        height: 380px;
        background: #fff;
        transform: translateX(311px) translateY(-983px) rotate(239deg);
        overflow: hidden;
    }
    .fade{
        opacity: 0;
        transition: all 1s;
    }
    .on{
        opacity: 1;
        transition: all 1s;
    }
</style>
<body>
    <div class="con">
        <p class="p1" id="pic1"><img class="fade" src="../day06/6.jpg" alt=""></p>
        <p class="p2" id="pic2"><img class="fade" src="../day06/6.jpg" alt=""></p>
        <p class="p3" id="pic3"><img class="fade" src="../day06/6.jpg" alt=""></p>

    </div>
    <script>
        var pic1=document.getElementById("pic1");
        var pic2=document.getElementById("pic2");
        pic1.onmouseover=function () {
           var img=pic1.getElementsByTagName("img")[0];
            img.className="on";
        }
        pic1.onmouseleave=function () {
            var img=pic1.getElementsByTagName("img")[0];
            img.className="fade";
        }
        pic2.onmouseover=function () {
            console.log(2)
            var img=pic2.getElementsByTagName("img")[0];
            img.className=" on";
        }
        pic2.onmouseleave=function () {
            var img=pic2.getElementsByTagName("img")[0];
            img.className="fade";
        }
    </script>
</body>
</html>